<template>
  <div class="project_item_template">
    <el-row :gutter="20" style="background-color: white;">
      <el-col :span="12" v-for="(item, index) in projectList " :key="index" class="panel-container">
        <div class="panel-wrapper">
          <a :href="item.projectLink" class="panel-funding"
             :style="getBGImage(item.projectImage)">
            <div class="panel-header">
              {{item.projectTitle}}
            </div>
            <div class="funding-bar">
              <div class="funding-bar--filled"></div>
            </div>

          </a>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'


  export default {
    data() {
      return {
        restaurants: [],
        state4: '',
        timeout: null,
        projectList: [
          {
            projectTitle: '10 Cool & Clever Finds',
            projectImage: 'static/img/project1.png',
            projectDesc: '',
            projectLink: ''
          },
          {
            projectTitle: 'Team Favorites',
            projectImage: 'static/img/project2.png',
            projectDesc: '',
            projectLink: ''
          },
          {
            projectTitle: 'It\'s Game Time',
            projectImage: 'static/img/project3.png',
            projectDesc: '',
            projectLink: ''
          },
          {
            projectTitle: 'Investment Opportunities',
            projectImage: 'static/img/project4.png',
            projectDesc: '',
            projectLink: ''
          }
        ]
      }
    },
    mounted() {
      //获取用户信息
      // this.getUserInfo();

    },
    props: ['signinUp', 'headTitle', 'goBack'],
    computed: {
      ...mapState([
        'userInfo'
      ]),
    },
    methods: {
      ...mapActions([
        'getUserInfo'
      ]),
      getBGImage(image) {
        return "background-image: url('" + image + "');"
      },
      loginInHandler() {
        this.$emit("loginInHandler")
      },
      signUpHandler() {
        this.$emit("signUpHandler")

      }
    },

  }

</script>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .project_item_template {
    height: 393px;
    clear: both;
    background-color: white;
    .panel-container {
      margin-bottom: 26px;
    }
    .panel-wrapper {
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
      height: 100%;
      .panel-funding {
        background: no-repeat center;
        height: 393px;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 20px;
        color: #2a2a2a;
        .panel-header {
          font-weight: bold;
          color: #ffffff;
          z-index: 1;
          text-align: center;
          margin: 15px;
          font-size: 40px;
        }

      }

    }

  }

</style>
